<template>
  <view> 
    <block v-if="!partsShow">
      <view class="box-top" v-for="(item, i) in dataList" :key="i">
        <!-- <view class="left-box-top " v-if="i === 0" >{{statusArr[item.planStatus-1]}}</view> -->
        <view class="left-box-top"></view>
        <!-- 左边 -->
        <view class="line" :class="{ none: i == dataList.length - 1 }"><!-- 中线 -->
          <!-- 圆点 -->
          <!-- <view  v-if="item.typeName" class="dotpuls"  ></view>
                <view v-else class="dot"></view> -->

          <view v-if="i === 0 && item.planStatus === 4" class="dotpulsImg">
            <image src="@/static/images/maintain/okk.png" mode=""></image>
          </view>
          <!-- <view class="dot" style="background-color: #0091FF;" v-else-if="item.typeName"></view> -->

          <view :class="item.active ? 'dot dotbg' : 'dot'" v-else></view>
        </view>
        <view class="right-box-top">
          <!-- 右边 -->
          <view class="actTit leftAct" v-if="item.executor">
            <text>{{ strLenght(item.executor) }}</text>
            <text>{{ item.typeName }}</text>
            <text class="leftAct_ci" @click="seeClick(item.extPlus.image)" v-if="
              (item.typeName == '签到开始' ||
                item.typeName == '签退' ||
                item.typeName == '签字' ||
                item.typeName == '客户签字') &&
              item.extPlus.image
            ">
              {{
                item.typeName == "签字" || item.typeName == "客户签字"
                  ? "查看签字"
                  : item.typeName == "签到开始"
                    ? "查看入场照"
                    : "查看退场照"
              }}
            </text>
            <text class="leftAct_ci" v-if="item.typeName == '分配计划' && item.createTime"
              @click="seeClickDetial(item, 1)">查看详情</text>
            <text class="leftAct_ci" v-if="item.typeName == '调整计划时间' && item.createTime"
              @click="seeClickDetial(item, 2)">查看调整记录</text>
          </view>
          <view class="actTit actImg" style="margin-bottom: rpx; color: #e02020"
            v-if="item && item.extPlus && item.extPlus.expDesc">
            <image v-if="item && item.extPlus && item.signStatus !== 1"
              :src="item.extPlus.expDesc ? arrColor[1] : arrColor[0]" mode=""></image>
            <image v-else :src="arrColor[4]" mode=""></image>
            <text>{{ item && item.extPlus && item.extPlus.expDesc ? item.extPlus.expDesc : "" }}</text>
          </view>
          <!-- <view class="actTit" style="margin-bottom:12rpx; margin-left: 30rpx; margin-top: 5rpx;" v-if="item.takeUpTime" >
                    耗时:{{item.takeUpTime}}
                </view> -->
          <view class="actTit actImg" v-if="item.extPlus && item.extPlus.address">
            <image :src="item.extPlus.expDesc ? '' : arrColor[0]" mode=""></image>
            <text class="acTaddress">
              {{
                item.typeName == "提交"
                  ? "提交地址:"
                  : item.typeName == "签到开始"
                    ? "签到地址:"
                    : "签退地址:"
              }}{{ (item && item.extPlus) ? item.extPlus.address : "" }}
            </text>
          </view>
          <view class="actTit actImg" style="padding: 12rpx 0" v-if="item.createTime">
            <view v-if="
              Object.keys(item.extPlus).length > 0 &&
              item.typeName == '调整计划时间'
            " class="distance" style="margin-bottom: 16rpx">
              <image src="@/static/images/maintain/jhsj.png" mode=""></image>
              {{ item.extPlus.desc || "" }}
              <text style="color: #333; margin-left: 8rpx">{{
                item.extPlus.planDate
                }}</text>
            </view>

            <view v-if="item.planDate && item.typeName == '分配计划'" class="distance" style="margin-bottom: 16rpx">
              <image src="@/static/images/maintain/jhsj.png" mode=""></image>
              设置初始计划时间至
              <text style="color: #333; margin-left: 8rpx">{{
                item.planDate.replaceAll("-", "/")
                }}</text>
            </view>
            <view v-if="item.getDaysStr && item.typeName == '分配计划'" class="distance">
              <image src="@/static/images/maintain/jl.png" mode=""></image>
              {{ item.getDaysStr }}
            </view>
            <image src="@/static/images/maintain/times.png" mode=""></image>
            {{ item.updateTime.replaceAll("-", "/") }}
          </view>
            <!-- ai合规情况结论 S -->
            <view v-if="item.modelId" @click="seeClick(item.extPlus.image)" :class="['ai-result', ['gre', 'org', 'red'][item.aiResult]]">
            <image class="ai-result-ico" src="@/static/images/ai.svg"></image>
            <text>
              {{ ['合规', '疑似合规', '不合规'][item.aiResult] }}
            </text>
          </view>
          <!-- ai合规情况结论 E -->
        </view>
      </view>
    </block>

    <block v-if="partsShow">
      <view class="box-top" v-for="(item, i) in dataList" :key="i">
        <!-- <view class="left-box-top " v-if="i === 0" >{{statusArr[item.planStatus-1]}}</view> -->
        <view class="left-box-top"></view>
        <!-- 左边 -->
        <view class="line" :class="{ none: i == dataList.length - 1 }"><!-- 中线 -->
          <!-- 圆点 -->
          <!-- <view  v-if="item.typeName" class="dotpuls"  ></view>
				<view v-else class="dot"></view> -->

          <view v-if="i === 0 && item.planStatus === 4" class="dotpulsImg">
            <image src="@/static/images/maintain/okk.png" mode=""></image>
          </view>
          <!-- <view class="dot" style="background-color: #0091FF;" v-else-if="item.typeName"></view> -->

          <view :class="item.active ? 'dot dotbg' : 'dot'" v-else></view>
        </view>
        <view class="right-box-top">
          <!-- 右边 -->
          <view class="actTit leftAct" v-if="item.executor">
            <text>{{ strLenght(item.executor) }}</text>
            <text v-if="item.extPlus && item.extPlus.expDesc == '系统代签'">{{
              "系统代签"
              }}</text>
            <text v-else-if="item.transferName">{{
              item.transferName + "【" + item.userNames + "】"
              }}</text>
            <text v-else>{{ item.transferNameTo || item.typeName }}</text>
            <text class="leftAct_ci" style="color: #55a302" v-if="item.passName">{{ item.passName }}</text>
            <text class="leftAct_ci" style="color: #FA6400" v-else-if="item.returnName">{{ item.returnName }}</text>
            <text class="leftAct_ci" style="color: #E02020" v-else-if="item.errorName">{{ item.errorName }}</text>
            <text class="leftAct_ci" @click="seeClick(item.extPlus.image)" v-if="
              (item.typeName == '签到开始' ||
                item.typeName == '签退' ||
                item.typeName == '签字' ||
                item.typeName == '客户签字') &&
              item.extPlus.image
            ">
              {{
                item.typeName == "签字" || item.typeName == "客户签字"
                  ? "查看签字"
                  : item.typeName == "签到开始"
                    ? "查看入场照"
                    : "查看退场照"
              }}
            </text>
          </view>
          <view class="actTit actImg" style="margin-bottom: rpx; color: #e02020" v-if="item.extPlus.expDesc">
            <image v-if="item.extPlus.signStatus !== 1" :src="item.extPlus.expDesc ? arrColor[1] : arrColor[0]" mode="">
            </image>
            <image v-else :src="arrColor[4]" mode=""></image>
            <text>{{ item.extPlus.expDesc || "" }}</text>
          </view>
          <view class="actTit actImg" v-if="item.extPlus.address">
            <image :src="item.extPlus.expDesc ? '' : arrColor[0]" mode=""></image>
            <text class="acTaddress">
              {{
                item.typeName == "提交"
                  ? "提交地址:"
                  : item.typeName == "签到开始"
                    ? "签到地址:"
                    : "签退地址:"
              }}{{ item.extPlus.address || "" }}
            </text>
          </view>

          <view class="actTit actImg" style="padding: 6rpx 8rpx 6rpx 0rpx" v-if="item.extPlus && item.extPlus.comment">
            <image src="@/static/images/maintain/jhsj.png" mode=""></image>
            <text class="comment" v-if="item.extPlus.comment.length < 32">{{
              item.extPlus.comment
              }}</text>
            <text v-else class="comment">{{ item.extPlus.comment.substr(0, 32) + '...' }}</text>
          </view>

          <view class="actTit actImg" style="padding: 12rpx 0" v-if="item.createTime">
            <view v-if="
              Object.keys(item.extPlus).length > 0 &&
              item.typeName == '调整计划时间'
            " class="distance" style="margin-bottom: 16rpx">
              <image src="@/static/images/maintain/jhsj.png" mode=""></image>
              {{ item.extPlus.desc || "" }}
              <text style="color: #333; margin-left: 8rpx">{{
                item.extPlus.planDate
                }}</text>
            </view>

            <view v-if="item.planDate && item.typeName == '分配计划'" class="distance" style="margin-bottom: 16rpx">
              <image src="@/static/images/maintain/jhsj.png" mode=""></image>
              设置初始计划时间至
              <text style="color: #333; margin-left: 8rpx">{{
                item.planDate.replaceAll("-", "/")
                }}</text>
            </view>
            <view v-if="item.getDaysStr && item.typeName == '分配计划'" class="distance">
              <image src="@/static/images/maintain/jl.png" mode=""></image>
              {{ item.getDaysStr }}
            </view>
            <image src="@/static/images/maintain/times.png" mode=""></image>
            {{ item.updateTime.replaceAll("-", "/") }}
          </view>
          <!-- <view class="actTit actImg"   v-if="item.latitude && item.longitude" >
					<image src="/static/images/maintain/address.png" mode=""></image>	
					<text style="color:#0091ff;cursor: pointer;" @click="seeAddressClick(item)">查看地址</text>
				</view> --> 
        
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
	data() {
		return {
			statusArr: ['待处理', '进行中', '已提交', '已完成'],
			signErrorArr: ['', '定位异常', '时间超长', '时间过短'],
			arrColor: [
				'/static/images/maintain/address.png',
				'/static/images/maintain/addressRED.png',
				'/static/images/maintain/funnel.png',
				'/static/images/maintain/funnelRED.png',
				'/static/images/maintain/computer.png',
			],
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => [],
		},
		statusShow: {
			type: Boolean,
			default: true,
		},
		partsShow: {
			type: Boolean,
			default: false,
		},
	},
	mounted() { },
	methods: {
		// analysisData(data){
		// 	if(!data){
		// 		return {}
		// 	}
		// 	let obj = JSON.parse(data)
		// 	return obj
		// },
		seeClick(url) {
			if (url) {
				this.$emit('seeClick', url);
			}
		},
		seeClickDetial(item, type) {
			this.$emit('seeClickDetial', item, type);
		},
		seeAddressClick(obj) {
			uni.openLocation({
				latitude: parseFloat(obj.latitude),
				longitude: parseFloat(obj.longitude),
				name: obj.buildingName,
				address: obj.buildingAddress,
				scale: 18,
				complete: (e) => {
					console.log(e);
				},
				success(e) { },
			});
			this.$emit('seeAddressClick', obj);
		},

		strLenght(val) {
			if (val.length > 10) {
				return val.substring(0, 10) + '...';
			}
			return val;
		},
	},
};
</script>

<style lang="scss" scoped>
.box-top {
  // margin-top: 30px;

  width: 100%;
  // min-height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-size: 28rpx;

  .left-box-top {
    width: 100rpx;
    text-align: left;
    font-size: 28rpx;
    font-weight: 500;
    color: #0091ff;
    margin-left: 30rpx;
  }

  .line {
    width: 2rpx;
    background-color: rgba(228, 231, 237, 1);
    margin: 0 30rpx 0 20rpx;

    // padding: 10px 0 10px 0;
    .dot {
      width: 18rpx;
      height: 18rpx;
      background-color: #fff;
      border: 2rpx #0091ff solid;
      border-radius: 50%;
      position: relative;
      left: -10rpx;
    }

    .dotbg {
      background-color: #fff;
      border: 2rpx #0091ff solid;
    }

    .dotpulsImg {
      width: 60rpx;
      height: 60rpx;
      position: relative;
      left: -18rpx;
      top: -6rpx;

      // line-height: 60rpx;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .dotpuls {
      width: 60rpx;
      height: 60rpx;
      position: relative;
      left: -16rpx;
      top: -20rpx;
      line-height: 60rpx;
    }

    .dotpuls:before {
      content: "";
      width: 30rpx;
      height: 30rpx;
      border: 2rpx solid #0091ff;
      background: #0091ff;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
    }

    .dotpuls:after {
      content: "";
      width: 17rpx;
      height: 10rpx;
      border: 2rpx solid #ffffff;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 24rpx;
      left: 9rpx;
      transform: rotate(-65deg);
    }
  }

  .right-box-top {
    flex: 1;
    padding: 0 0 40rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    // margin-top: -8px;
    position: relative;
    top: -12rpx;

    .see {
      font-size: 28rpx;
      font-weight: 400;
      color: #0091ff;

      text {
        display: inline-block;
        margin: 0 10rpx 0 10rpx;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        border-bottom: 2rpx #0091ff solid;
        border-right: 2rpx #0091ff solid;
        transform: rotate(-45deg);
      }
    }

    .actTit {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;

      // height: 30rpx;
      text {}

      .comment {
        color: #666;
        font-weight: 400;
        margin-left: 4px
      }
    }

    .actImg {

      // width: 500rpx;
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      // height: 80rpx;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
        vertical-align: top;
        margin-bottom: 5rpx;
        margin-top: 7rpx;
        display: inline-block;
      }

      .acTaddress {
        display: inline-block;
        width: 330rpx;
      }
    }

    .leftAct {
      //   height: 30rpx;
      font-size: 28rpx;
      //   line-height: 1;
      margin-bottom: 10rpx;

      text {
        display: inline-block;
      }

      text:nth-of-type(1) {
        color: #0091ff;
        font-weight: 600;
      }

      text:nth-of-type(2) {
        color: #333333;
        font-weight: 600;
        // margin-left: 10rpx;
      }

      .leftAct_ci {
        color: #0091ff;
        float: right;
        margin-right: 20rpx;
        cursor: pointer;
      }
    }

    .content {
      margin: 20rpx 0 20rpx 0;
    }
  }
}

.activeTit {
  font-size: 56rpx;
  font-weight: 600;
  color: #333333;
}

.active {
  background-color: rgba(44, 143, 233, 1) !important;
}

.none {
  background-color: rgba(0, 0, 0, 0) !important;
}

.distance {
  margin-bottom: 16rpx;
}

.ai-result {
  position: absolute;
  top: 52rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  border-radius: 8rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 12rpx 6rpx 12rpx;
  vertical-align: unset;
  font-weight: normal;

  &-ico {
    width:23rpx;
    height: 23rpx;
    margin-right: 4rpx;
  }
}

.gre {
  background-color: #68CA00;
}

.org {
  background-color: #FF7505;
}

.red {
  background-color: #E02020;
}
</style>
